<template>
  <div class="addFeed" :style="'height:' + height + 'px;'">
    <div>
      <HeadTop :title="headTitle"></HeadTop>
      <div class="head-time">{{new Date | format}}</div>
    </div>
    <div class="addClass">
      <div class="addClass-title">白班交接</div>
      <div class="addClass-line"></div>
      <div class="addFeed-con" >
        <div class="addFeed-con-name">大体缸</div>
        <div>
          <input class="addFeed-con-msg" />
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">小体缸</div>
        <div>
          <input class="addFeed-con-msg" />
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">实验室</div>
        <div>
          <input class="addFeed-con-msg"/>
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">企鹅</div>
        <div>
          <input class="addFeed-con-msg" v-model="fodderQuantity"/>
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">水母</div>
        <div>
          <input class="addFeed-con-msg" v-model="fodderQuantity"/>
        </div>
      </div>
    </div>
    <div class="addClass">
      <div class="addClass-title">夜班交接</div>
      <div class="addClass-line"></div>
      <div class="addFeed-con" >
        <div class="addFeed-con-name">大体缸</div>
        <div>
          <input class="addFeed-con-msg" />
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">小体缸</div>
        <div>
          <input class="addFeed-con-msg" />
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">实验室</div>
        <div>
          <input class="addFeed-con-msg"/>
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">企鹅</div>
        <div>
          <input class="addFeed-con-msg" v-model="fodderQuantity"/>
        </div>
      </div>
      <div class="addFeed-con">
        <div class="addFeed-con-name">水母</div>
        <div>
          <input class="addFeed-con-msg" v-model="fodderQuantity"/>
        </div>
      </div>
      <div class="addFeed-tab">
        <div class="addFeed-tab-time">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value" :options="opt" />
            </van-dropdown-menu>
        </div>
        <div>
          <div class="addFeed-status">
            <div class="addFeed-status-left"><span>设备状态</span><span>:</span></div>
            <div class="detail-form-list-con-div-con">

                <div class="detail-true" v-if="true"></div>
                <div class="detail-boolen" v-else></div>
                正常
            </div>
            <div class="detail-form-list-con-div-con">

                <div class="detail-false" v-if="false"></div>
                <div class="detail-boolen" v-else></div>
                异常
            </div>
          </div>
          <div class="addFeed-status">
            <div class="addFeed-status-left"><span>生物状态</span><span>:</span></div>
            <div class="detail-form-list-con-div-con">

                <div class="detail-true" v-if="true"></div>
                <div class="detail-boolen" v-else></div>
                正常
            </div>
            <div class="detail-form-list-con-div-con">

                <div class="detail-false" v-if="false"></div>
                <div class="detail-boolen" v-else></div>
                异常
            </div>
          </div>
          <div class="addFeed-status">
            <div class="addFeed-status-left"><span>循环状态</span><span>:</span></div>
            <div class="detail-form-list-con-div-con">

                <div class="detail-true" v-if="false"></div>
                <div class="detail-boolen" v-else></div>
                正常
            </div>
            <div class="detail-form-list-con-div-con">

                <div class="detail-false" v-if="true"></div>
                <div class="detail-boolen" v-else></div>
                异常
            </div>
          </div>
          <div class="addFeed-status">
            <div class="addFeed-status-left"><span>备</span><span>注:</span></div>
            <textarea class="addFeed-text" placeholder="股市过热和埃尔特和"></textarea>
          </div>
        </div>
      </div>
      <!-- <div class="addFeed-tab">
        <div class="addFeed-tab-time">2020年3月7日 <div @click="showPopup"> {{currentTime}}</div></div>
        <div>
          <div>
            <div>设备状态:</div>
            <div>正常</div>
            <div>异常</div>
          </div>
        </div>
      </div> -->

    </div>
    <div class="addClass">
      <div class="addClass-title">备注</div>
       <textarea  rows="2" class="addClass-title-text" v-model="tips"></textarea>
    </div>
    <div class="addClass-btn">
      <div class="addClass-btn-hold" @click="submit(0)">保存</div>
      <div class="addClass-btn-submit" @click="submit(1)">提交</div>
    </div>
  </div>
</template>
<script>
import { getTodayReport, addMedictionReport, logo2 } from '../../../../api/index.js'
import HeadTop from '../../../../components/headTop.vue'
import { getYYYYMMDD } from '../../../../api/unit.js'
export default {
  data () {
    return {
      headTitle: '值班交接',
      opt: [
        {
          text: '5:30',
          value: '5:30'
        }
      ],
      value: '5:30',
      height: document.documentElement.clientHeight,
      tips: '',
      fodderQuantity: ''
    }
  },
  filters: {
    format: function (value) {
      return getYYYYMMDD(value).nTime
    }
  },
  async mounted () {
    await getTodayReport()
  },
  methods: {
    showPopup () {
      this.show = true
    },
    async submit (v) {
      if (this.fodderQuantity === '') {
        this.$notify({ type: 'danger', message: '请输入数量' })
        return
      }
      let data = {
        medictionId: this.opt[this.value].id,
        quantity: this.fodderQuantity,
        operationId: this.opt2[this.value2].id,
        remark: this.tips,
        submit: v
      }
      let result = await addMedictionReport(data)
      if (result.code === 10000) {
        this.$router.go(-1)
      } else {
        this.$notify({ type: 'danger', message: result.msg })
      }
    }
  },
  components: {
    HeadTop
  }
}
</script>

<style scoped>
.addFeed{
  background: #e5e5e5;
}
.head-time{
  width:750px;
  height:109px;
  background: #fff;
  border-top: #e5e5e5 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:32px;
  font-weight: bold;
}
.addClass{
  background: #fff;
  width: 686px;
  border-top: #e5e5e5 solid 17px;
  padding: 40px 32px;
  font-size: 32px;
  overflow: hidden;
}
.addClass-title{
  padding-bottom: 40px;
  font-weight: bold;
  margin-left: 5px;
}
.addClass-line{
  background-color: #e5e5e5;
  height: 1px;
  width: 686px;
}
.addFeed-con{
  display: flex;
  font-size: 28px;
  color: #757575;
  height: 45px;
  line-height: 45px;
  margin-top: 34px;
}
.van-dropdown-menu{
  height: 45px;
  background: #f9f9f8;
  text-align: left;

}
.addFeed-con-name{
  width: 150px;
  margin-left: 12px;
}
.addFeed-con-msg{
  padding: 0 25px;
  width: 485px;
  background: #FBF8F9;
}
.addClass-title-text{
  width: 675px;
  background: #FBF8F9;
  line-height: 54px;
  border: 1px solid #e5e5e5;
}
.addClass-btn{
  width: 750px;
  background: #e5e5e5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 154px;
  font-size: 32px;
}
.addClass-btn-hold{
  width: 332px;
  height: 111px;
  line-height: 111px;
  text-align: center;
  background: #fff;
  font-weight: bold;
  color: #999;
}
.addClass-btn-submit{
  width: 332px;
  height: 111px;
  line-height: 111px;
  text-align: center;
  color: #009EEA;
  background: #fff;
  font-weight: bold;
}
.addFeed-tab{
    border: 1px solid #DFDCDD;
    width: 681px;
    margin-top: 31px;
    overflow: hidden;
  }
  .addFeed-tab-time{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    text-align: center;
    border-bottom: 1px solid #DFDCDD;
    color: #202020;
    font-size: 30px;
    letter-spacing: 3px;
  }
  .van-dropdown-menu{
    background: none;
    height: 72px;
  }
.addFeed-status{
    display: flex;
    align-items: center;
    color: #202020;
    font-size: 26px;
  }
  .addFeed-status-left{
    width: 130px;
    margin-left: 21px;
    display: flex;
    justify-content: space-between;
  }
  .detail-form-list-con-div-con{
    display: flex;
    width: 130px;
    align-items: baseline;
    justify-content: center;
   /* align-items: flex-start;
    justify-items: center; */
    margin-left: 60px;
    margin-top: 19px;
  }
  .detail-true{
    width:20px;
    height:20px;
    background: #0FBD9D;
    border-radius:50%;
    margin-right: 5px;
  }
  .detail-false{
    width:20px;
    height:20px;
    background: #FF8D17;
    border-radius:50%;
    margin-right: 5px;
  }
  .detail-boolen{
    width:20px;
    height:20px;
    border:2px solid rgba(229,229,229,1);
    border-radius:50%;
    margin-right: 5px;
  }
  .addFeed-text{
    width: 348px;
    border: 1px solid #CECED0;
    background: #F9F9FB;
    margin-left: 41px;
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 10px 21px;
  }
</style>
